<template>
  <div id="userLayout" :class="['user-layout-wrapper']" >
    <video muted autoplay loop :src="`${url}/video/home.mp4`"></video>
    <div class="container">
      <h1 class="login-title"> <img :src="require('@/assets/Image/home-logo.png')" width="48px" alt="" style="margin-top: -12px"> “甬网智享”网络空间综合治理智控平台</h1>
      <div class="login-bg">
        <router-view></router-view>
      </div>

      <!-- <div class="footer">
        <div class="copyright">
          Copyright &copy; 浙江城市数字技术有限公司提供技术支持
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>

  export default {
    name: 'LoginLayout',
    data() {
      return {
        url: process.env.VUE_APP_ROUTER_BASE_URL
      };
    },
    mounted() {
      document.body.classList.add('userLayout');
    },
    beforeDestroy() {
      document.body.classList.remove('userLayout');
    }
  };
</script>

<style lang="less" scoped>
video {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
  #userLayout.user-layout-wrapper {
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    .container {
      width: 100%;
      // min-height: 100vh;
      // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
      background-size: 100%;

      position: relative;
      background-size: cover;
      z-index: 2;
      flex-wrap: wrap;
      height: 80vh;
      .login-bg {
        width: 420px;
        height: 500px;
        background: #FFFFFF;
        box-shadow: 0px 6px 72px 5px #203C8C;
        border-radius: 13px;
        margin: 0 auto;
        margin-top: 64px;
        padding: 56px 64px;
        box-sizing: border-box;
      }
      .login-title {
        // position: absolute;
        // top: 80px;
        width: 100%;
        text-align: center;
        color: #fff;
        margin: 0;
        font-size: 48px;
        letter-spacing: 8px;
        text-shadow: 0 0 10px rgba(0,0,0,0.7);
      }
    }
  }
</style>
